<template>
	<view class="familyBox">
		<view class="familyBox1">
			<view class="familyBox1title ">
				<view class="familyBox1titletext">成员信息</view>
				<view class="familyBox1titlebg"></view>
			</view>
			<view v-for="item in 10" class="familyBox1Content">
				<view class="familyInfo">
					<view class="InfoName">
						<span class="InfoName1">张淼{{item}}</span>
						<span class="InfoName2">本人</span>
					</view>
					<view class="InfoPhone">13199999999</view>
					<view class="InfoID">
						<span class="InfoID1">330283199902341123</span>
						<image class="InfoID2" src="../../static/images/home/编辑@2x.png" mode=""></image>
					</view>
				</view>
			</view>
			<view class="addFamily">
				<button class="addFamilybutton">添加家人</button>
			</view>
		</view>
	</view>
</template>

<script>
</script>

<style>
	.familyBox{
		width: 100%;
		height: 93vh;
		overflow: auto;
		padding: 3% 0;
		background: #F5F8FA;
	}
	.familyBox1{
		width: 94%;
		height: 94%;
		overflow: auto;
		background: #fff;
		padding: 3%;
		margin-bottom: 170rpx;
	}
	.familyBox1title {
		position: relative;
		width: 135rpx;
		height: 38rpx;
		margin-bottom: 30rpx;
	}
	.familyBox1titletext {
		font-size: 31rpx;
		color: #333333;
		line-height: 33rpx;
		font-weight: bold;
		font-weight: bold;
	}
	
	.familyBox1titlebg {
		width: 135rpx;
		height: 21rpx;
		background: #5098E1;
		opacity: 0.15;
		position: absolute;
		bottom: 0;
	}
	.familyBox1Content{
		width: 92%%;
		/* height: 175rpx; */
		background: rgb(229, 240, 251, 0.5);
		border-radius: 19rpx;
		/* opacity: 0.4; */
		margin-top: 15rpx;
		padding: 4%;
	}
	.InfoName{
		width: 100%;
		height: 60rpx;
	}
	.InfoName1{
		float: left;
		font-size: 30rpx;
		color: #000000;
		font-weight: bold;
	}
	.InfoName2{
		font-size: 25rpx;
		color: #005CAB;
		font-weight: bold;
		float: right;
	}
	.InfoPhone{
		width: 100%;
		height: 35rpx;
		font-size: 25rpx;
		color: #666666;
		line-height: 38rpx;
	}
	.InfoID{
		width: 100%;
		height: 35rpx;
	}
	.InfoID1{
		font-size: 25rpx;
		color: #666666;
		line-height: 38rpx;
		float: left;
	}
	.InfoID2{
		width: 28rpx;
		height: 28rpx;
		float: right;
	}
	.addFamily{
		width: 100%;
		height: 170rpx;
		background: #FFFFFF;
		position: fixed;
		bottom: 0;
		left: 0;
	}
	.addFamilybutton{
		width: 80%;
		height: 90rpx;
		border-radius: 45rpx;
		font-weight: bold;
		background-image: linear-gradient(to right, #449EEC 0%, #005bea 100%);
		color: #fff;
		margin-top: 40rpx;
		
	}
</style>